import $ from "jquery";
import React from "react";
import { Col, Image, Row, Space } from "antd";
import conf from "./runtime/configuration";
import wqImg from "./img/weather/Q.svg";
import wlImg from "./img/weather/L.svg";
import wxImg from "./img/weather/X.svg";
import wyImg from "./img/weather/Y.svg";
import wmImg from "./img/weather/M.svg";
import w_Img from "./img/weather/_.svg";
import "./WeatherInfoBuilder.css";

export function findImageOfWeather(weatherName: string): string {
  if (weatherName === "晴") {
    return wqImg;
  } else if (weatherName.includes("雨")) {
    return wyImg;
  } else if (weatherName.includes("雷")) {
    return wlImg;
  } else if (weatherName.includes("雪")) {
    return wxImg;
  } else if (weatherName.includes("霾")) {
    return wmImg;
  } else {
    return w_Img;
  }
}

export default class WeatherInfoBuilder extends React.Component<{}, any> {
  constructor(props: any) {
    super(props);
    this.state = { info: null };
  }

  componentDidMount = () => {
    if (!conf.use.disableWeatherInfo) {
      $.get(
        conf.url.weatherServer,
        conf.weatherInfoParameters,
        (data, status) => {
          if (status === "success" && data.infocode === "10000") {
            this.setState({ info: data.lives[0] });
          } else {
            console.log("Failed to GET weather info!");
            console.log(status);
            console.log(data);
          }
        }
      );
    }
  };

  render(): React.ReactNode {
    if (this.state.info === null) {
      return <></>;
    } else {
      const info = this.state.info;
      return (
        <Row id="weather-container">
          <Col span={17}>
            <Row>
              <Col id="weather-city" span={24}>
                {info.city} {info.weather}
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <span id="weather-temperature">{info.temperature}℃</span>{" "}
                <Space size='large'/>
                <span id="weather-description">风力 {info.windpower}</span>
              </Col>
            </Row>
          </Col>
          <Col span={6} offset={1}>
            <Image
              src={findImageOfWeather(info.weather)}
              preview={false}
            ></Image>
          </Col>
        </Row>
      );
    }
  }
}
